<template>
  <Table
    ref="tableRef"
    :url="URL_QUERYLEVELLIST"
    :columns="data.columns"
    :handles="data.handles"
    :toolbar="data.toolbar"
  ></Table>
  <el-dialog
    v-model="data.dialogVisible"
    v-if="data.dialogVisible"
    title="用户列表"
    width="1000px"
    class="qc-custom-dialog"
    :before-close="handleClose"
  >
    <Table
      ref="dialogUserRef"
      :url="URL_QUERYUSERLIST"
      :columns="dialogData.columns"
      :toolbar="dialogData.toolbar"
      :query="dialogData.query"
      :params="{ levelId: data.levelId }"
      listKey="list"
    ></Table>
  </el-dialog>
</template>
  
<script lang="ts" setup name="membershipLevelList">
import Table from '@/components/table/index.vue';
import { USER_TYPES } from '@/utils/dictionaries';
import {
  deleteLevel,
  URL_QUERYLEVELLIST,
  EXPORT_USERLEVEL,
} from '@/service/apis/config';
import { URL_QUERYUSERLIST } from '@/service/apis/user';
import { USER_TYPE } from '@/utils/dictionaries';
import { exportFile } from '@/utils/utils';

const router = useRouter();

const tableRef = ref();
const dialogUserRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

const data = reactive({
  dialogVisible: false,
  levelId: '',
  columns: [
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'levelName',
      label: '等级名称',
    },
    {
      prop: 'experienceValue',
      label: '经验值要求',
      template: (row: any) => {
        return String(row.experienceValue);
      },
    },
    {
      prop: 'totalSize',
      label: '当前等级人数',
    },
  ],
  handles: [
    {
      label: '修改',
      permission: 'membershipLevelList.edit',
      handle: (row: any) => {
        router.push({
          name: 'membershipLevelEdit',
          query: row,
        });
      },
    },
    {
      label: '用户列表',
      permission: 'membershipLevelList.see',
      handle: (row: any) => {
        nextTick(() => {
          data.levelId = row.id;
          data.dialogVisible = true;
        });
      },
    },
    {
      label: '删除',
      color: '#FA3939',
      permission: 'membershipLevelList.delete',
      disabledFun: (row: any) => {
        return row.isDefault;
      },
      handle: (row: any) => {
        ElMessageBox.confirm('此操作将删除该会员等级，是否继续？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteLevel({
            id: row.id,
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'membershipLevelList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'membershipLevelAdd',
        });
      },
    },
  ],
});

const dialogData = reactive({
  columns: [
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'userName',
      label: '用户姓名',
    },
    {
      prop: 'unit',
      label: '用户类型',
      dic: USER_TYPES,
    },
    {
      prop: 'mobile',
      label: '手机号',
    },
    {
      prop: 'experienceValue',
      label: '经验值',
      template: (row: any, index: number) => {
        return String(row.experienceValue);
      },
    },
    {
      prop: 'riseTime',
      label: '升级时间',
    },
    {
      prop: 'isFrozen',
      label: '状态',
      template: (row: any, index: number) => {
        return row.isFrozen
          ? `<div style="color:#FA3939;">冻结</div>`
          : `<div style="color:#01C68B;">正常</div>`;
      },
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'membershipLevelList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_USERLEVEL,
          '用户列表',
          dialogUserRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '用户姓名',
      prop: 'userName',
      comName: 'input',
      props: {
        placeholder: '请输入用户姓名',
      },
    },
    {
      label: '用户类型',
      prop: 'unit',
      comName: 'select',
      props: {
        placeholder: '请选择用户类型',
        change: (value: any) => {
          console.log(value);
        },
        options: USER_TYPES,
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '用户状态',
      prop: 'isFrozen',
      comName: 'select',
      props: {
        placeholder: '请选择状态',
        change: (value: any) => {
          console.log(value);
        },
        options: USER_TYPE,
      },
    },
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
  ],
});
const handleClose = (done: () => void) => {
  tableRef.value?.handleReset();
  done();
};
</script>